<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-01-16 23:41:40
-->
<template>
    <div class="playing-list" id="play-song-list">
        <!-- 切换标签 -->
        <div class="top-nav">
            <ul>
                <li v-for="(item, index) in tags" :key="index" :class="{ active: activeTag === index }"
                    @click="changeTag(index)">
                    <span>{{ item.name }}</span>
                </li>
            </ul>
        </div>
        <!-- 当前播放 -->
        <div class="play-list" v-if="activeTag === 0">
            <div class="top">
                <div class="num">总{{ music.playingList.length }}首</div>
                <el-popconfirm title='确定删除全部歌曲吗?' @confirm="clearAll" confirm-button-text="确定" cancel-button-text="取消">
                    <template #reference>
                        <span>清空列表</span>
                    </template>
                </el-popconfirm>
            </div>
            <div class="table">
                <el-table :data="music.playingList" stripe style="width: 100%" empty-text="快点添加歌曲吧~"
                    @row-dblclick="playSongClick">
                    <!-- 索引或喇叭 -->
                    <el-table-column width="50">
                        <template v-slot="{ row, $index }">
                            <span class="iconfont"
                                :class="music.isplaying ? 'icon-shengyin_shiti' : 'icon-shengyin-guan'"
                                v-if="row.id === music.nowSongDetail.id"></span>
                            <span v-else>{{ $index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <!-- 歌名 -->
                    <el-table-column :show-overflow-tooltip="true" width="120">
                        <template v-slot="{ row }">
                            <span :class="music.nowSongDetail.id === row.id ? 'color' : ''">{{ row.name }}</span>
                        </template>
                    </el-table-column>
                    <!-- 歌手名 -->
                    <el-table-column width="120">
                        <template v-slot="{ row, $index }">
                            <span v-for="(item, index) in row.ar" :key="item.id" class="sname"
                                :class="music.nowSongDetail.id === row.id ? 'color' : ''" @click="gotoSinger(item)">
                                {{ item.name }}
                            </span>
                        </template>
                    </el-table-column>
                    <!-- 歌曲时间 -->
                    <el-table-column width="100">
                        <template v-slot="{ row }">
                            <span :class="music.nowSongDetail.id === row.id ? 'color' : ''">{{
                                instance.proxy.$formatDuration.formatDurations(row.dt)
                            }}</span>
                        </template>
                    </el-table-column>
                    <!-- 操作 -->
                    <el-table-column width="60">
                        <template v-slot="{ row }">
                            <el-popconfirm :title='`确定删除${row.name}吗?`' @confirm="deleteSong(row)"
                                confirm-button-text="确定" cancel-button-text="取消" id="caoz">
                                <template #reference>
                                    <span class="iconfont icon-guanbi"></span>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!-- 历史播放 -->
        <div class="history-list" v-if="activeTag === 1">
            <div class="top">
                <div class="num">总{{ music.playingList.length }}首</div>
                <el-popconfirm title='确定删除全部歌曲吗?' @confirm="clearAll(1)" confirm-button-text="确定"
                    cancel-button-text="取消">
                    <template #reference>
                        <span>清空列表</span>
                    </template>
                </el-popconfirm>
            </div>
            <div class="table">
                <el-table :data="music.historyPlay" stripe style="width: 100%" empty-text="快点添加歌曲吧~"
                    @row-dblclick="playSongClick">
                    <!-- 索引或喇叭 -->
                    <el-table-column width="50">
                        <template v-slot="{ row, $index }">
                            <span class="iconfont"
                                :class="music.isplaying ? 'icon-shengyin_shiti' : 'icon-shengyin-guan'"
                                v-if="row.id === music.nowSongDetail.id"></span>
                            <span v-else>{{ $index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <!-- 歌名 -->
                    <el-table-column :show-overflow-tooltip="true" width="120">
                        <template v-slot="{ row }">
                            <span :class="music.nowSongDetail.id === row.id ? 'color' : ''">{{ row.name }}</span>
                        </template>
                    </el-table-column>
                    <!-- 歌手名 -->
                    <el-table-column width="120">
                        <template v-slot="{ row, $index }">
                            <span v-for="(item, index) in row.ar" :key="item.id" class="sname"
                                :class="music.nowSongDetail.id === row.id ? 'color' : ''" @click="gotoSinger(item)">
                                {{ item.name }}
                            </span>
                        </template>
                    </el-table-column>
                    <!-- 歌曲时间 -->
                    <el-table-column width="100">
                        <template v-slot="{ row }">
                            <span :class="music.nowSongDetail.id === row.id ? 'color' : ''">{{
                                instance.proxy.$formatDuration.formatDurations(row.dt)
                            }}</span>
                        </template>
                    </el-table-column>
                    <!-- 操作 -->
                    <el-table-column width="60">
                        <template v-slot="{ row }">
                            <el-popconfirm :title='`确定删除${row.name}吗?`' @confirm="deleteSong(row, 1)"
                                confirm-button-text="确定" cancel-button-text="取消">
                                <template #reference>
                                    <span class="iconfont icon-guanbi"></span>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, watch, inject } from 'vue'
import { useMusicStore } from '@/store/music.js'
import { useRouter } from 'vue-router'
import { getSongUrl, checkMusic, likeMusic, getEverySongDetail, getUserSongLikeList } from '@/api/playmusic/playmusic.js'

const emit = defineEmits(['toggleSong', 'closePlayList', 'playMusic'])
const router = useRouter()
let reload = inject('reload')
let music = useMusicStore()
let instance = getCurrentInstance()
let tags = ref([
    { name: '当前播放' },
    { name: '历史播放' }
])
let activeTag = ref(0)

function changeTag(index) {
    activeTag.value = index
}

//在播放列表中点击歌曲 flag=1表示历史播放
async function playSongClick(song) {
    //先判断当前播放的歌曲与点击的歌曲是否一致
    if (music.nowSongDetail.id === song.id) {
        if (music.isplaying === false)
            emit('playMusic')
        return;
    }
    //先检查歌曲是否可用
    let res = await checkMusic(song.id)
    if (res.data.success === true) {  //歌曲可用
        //获取歌曲url
        let res1 = await getSongUrl(song.id)
        music.saveSongUrl(res1.data.data[0].url)   //把歌曲播放地址存到仓库中
        //修改播放状态
        music.changePlayState(true)
        music.addPlayingList(song)
        //保存当前歌曲详细信息 去重 如果列表不存在相同的歌曲 再添加到历史播放记录
        music.SaveSongDetailAndaddHistoryPlayList(song)
        //保存歌曲总时长等等,并进行格式化时间
        music.totalTime = instance.proxy.$formatDuration.formatDurations(music.nowSongDetail.dt)
        music.totalSecond = music.nowSongDetail.dt
    } else {
        instance.appContext.config.globalProperties.$message({
            message: '暂时无法播放(无版权),换首试试',
            type: 'warning',
            showClose: true
        })
    }
}

//气泡弹出框事件,确认 ———— 删除某一个歌曲 —— 播放 | 历史列表   
function deleteSong(song, flag = 0) {
    if (flag == 0) {
        //先删除
        music.deletePlayingSong(song)
        //首先确保不为空列表
        if (music.playingList.length !== 0) {
            //如果删除的是当前播放的音乐,需要播放下一首歌
            if (song.id === music.nowSongDetail.id) {
                //触发自定义事件  1下一首 1标志
                emit('toggleSong', 1, 1)
            }
        }
    } else music.deleteHistoryList(song)
}
//清空当前播放列表 | 历史播放
function clearAll(flag = 0) {
    if (flag === 1)
        music.clearHistoryList()
    else
        music.clearPlayingList()
}

//点击其他区域关闭播放列表
function isClosePlayList() {
    //点击其他区域(不包括播放器控制栏)关闭播放列表
    let playingList = document.querySelector('#play-song-list')
    let footer = document.querySelector('.footer')
    document.addEventListener('mousedown', e => {
        if (playingList) { //如果打开了播放列表
            let elpopconfirm = document.querySelector('.el-popconfirm')
            if (elpopconfirm) {
                //如果不是播放列表区域和底层区域 就关闭播放列表
                if (!playingList.contains(e.target) && !footer.contains(e.target) && !elpopconfirm.contains(e.target))
                    emit('closePlayList')  //就关闭播放列表
            }
            else {
                //如果不是播放列表区域和底层区域 就关闭播放列表
                if (!playingList.contains(e.target) && !footer.contains(e.target))
                    emit('closePlayList')  //就关闭播放列表
            }
        }
    })
}

//前往歌手详细页
function gotoSinger(item) {
    router.push({
        name: 'Singerdetail',
        params: { id: item.id }
    })
}


onMounted(() => {
    isClosePlayList()
})

</script>

<style lang="scss" scoped>
.playing-list {
    position: absolute;
    bottom: 70px;
    right: 0;
    height: calc(100vh - 130px);
    background: #fff;
    border-left: 1px solid #ebebeb;
    box-shadow: -3px 0px 5px 0px #eee;
    padding: 0 10px;

    .top-nav {
        width: 100%;
        height: 30px;
        margin-top: 10px;
        display: flex;
        justify-content: center;

        ul {
            display: flex;
            // justify-content: center;
            border: 1px solid #cecece;

            li {
                cursor: pointer;
                padding: 5px 25px;

                span {
                    font-size: 14px;
                }

            }
        }
    }

    .play-list,
    .history-list {
        margin-top: 20px;
        height: calc(100% - 79px);

        .top {
            display: flex;
            justify-content: space-between;

            .num {
                color: #cecece;
            }

            span {
                color: #507daf;
                cursor: pointer;
            }
        }

        .table {
            height: 100%;
            overflow-y: scroll;

            .sname:hover {
                cursor: pointer;
                color: black;
            }
        }
    }
}

.active {
    background-color: #bbbbbb;
    color: white;
}

.icon-guanbi:hover {
    cursor: pointer;
    color: var(--mycompColor);
}

.color {
    color: var(--mycompColor) !important;
}
</style>